<template>
    <a-breadcrumb class="bread-wrapper" separator=">">
        <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.path">
            <!-- <router-link v-if="index < (breadList.length - 1)" :to="item.path">{{ item.meta.title }}</router-link> -->
            <span class="prev_name" @click="goBack(item.path)" v-if="index < (breadList.length - 1)">{{ item.meta.title
            }}</span>
            <span class="breadcrumb_current_name" v-else>{{ item.meta.title }}</span>
        </a-breadcrumb-item>
    </a-breadcrumb>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'breadCrumb',
    components: {},
    data() {
        return {
            breadList: []
        };
    },
    computed: {
        ...mapState({
            homeRoute: state => state.user.homeRoute
        })
    },
    // watch: {
    //     $route: {
    //         handler() {
    //             this.getBreadCrumb()
    //         },
    //         immediate: true
    //     }
    // },
    created() {
        this.getBreadCrumb();
    },
    methods: {
        goBack(path) {
            this.$router.push({
                path
            });
        },
        getBreadCrumb() {
            let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
            let {breadcrumb} = matched[0].meta || {breadcrumb:[]};
            // let home = {
            //     path: this.homeRoute,
            //     meta: {
            //         title: '首页'
            //     }
            // };
            // if (matched[0].path == '/index') {
            //     this.breadList = [home];
            // } else {
            //     this.breadList = [home, ...matched];
            // }
            this.breadList = [...breadcrumb];
        }
    },
    watch: {
        $route() {
            this.getBreadCrumb();
        }
    }
};
</script>
<style lang="scss" scoped>
.bread-wrapper {
    height: 100%;
    line-height: 36px;
    padding-left: 10px;
    font-weight: bold;
    background: #F1F1F1;

    .prev_name {
        color: #666;
        cursor: pointer;
    }

    .ant-breadcrumb-link a {
        color: #333;
    }
}</style>
